<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three js学习</title>
</head>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%;
    }
</style>
<body>

</body>
<script src="three/three.min.js"></script>
<script>
    // debugger
    // 画布
    let scene = new THREE.Scene()

    // 画一个长方体
    let cft = new THREE.BoxGeometry(100, 200, 200)
    // 设置材质颜色
    let ys = new THREE.MeshLambertMaterial({
        color: 0xFFFFFF
    })

    // 渲染图形
    let mesh = new THREE.Mesh(cft, ys)
    // 加入画布
    scene.add(mesh)

    // 光源
    let point = new THREE.PointLight(0xffffff)
    point.position.set(100,200,300)
    scene.add(point)

    // 环境光
    let hjg = new THREE.AmbientLight(0x444444)
    scene.add(hjg)


    let width = window.innerWidth //窗口宽度
    let height = window.innerHeight //窗口高度
    let k = width / height // 窗口宽高比
    let s = 200
    let camera =
        new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(200, 150, 200) // 设置相机位置
    camera.lookAt(scene.position)


    // 渲染器
    let renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height)
    renderer.setClearColor(0xb9d3ff, 1)

    // 放在浏览器中
    document.body.appendChild(renderer.domElement)

    renderer.render(scene, camera)
</script>
</html>